<template>
  <div id="areaWrapper">

  </div>
</template>

<script>
    export default {
      name: "srvlist",
      created() {
        console.log(this.$route.query.sysName)
        this.getSrvList(this.$route.query.sysName)
      },
      data(){
        return{
          srvList:{},
          loading:false
        }
      },
      methods:{
        getSrvList(key){
          // service_info?sysName=ec-delivery-d3
          let url = `http://172.20.40.253/api/v1/query/service_info?sysName=${key}`
          console.log(key)
          this.$get(url,{}).then((res)=>{
            if (res.data.status=="success"){
              this.srvList = res.data.data
            }
          })
        },
        goDetail(key){
          console.log(key)
          this.$router.push({
            path:'/pathList',
            query:{
              sysName:this.$route.query.sysName,
              srvName:key
            }
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  #areaWrapper{
    width: 98%;
    height: 97vh;
    margin: 20px auto;
    overflow: auto;
    /*padding-top: 20px;*/
    /*border:1px solid;*/
    background-color: #fff;
    display: flex;
    justify-content: space-between;
      .left{
        height: 100%;
        border:1px solid #e8e8e8;
        border-radius: 4px;
        box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);
        overflow: auto;
      }
      .right{
        margin-left: 15px;
        height: 100%;
        border:1px solid #e8e8e8;
        border-radius: 4px;
        box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);
        overflow: auto;
        flex:1
      }
      .rightContent{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96%;
        margin: 0 auto;
      }
  }
  .cardArea{
    width: 99%;
    margin-top: 0 !important;
    border-radius: 3px;
    padding: 0 15px 0 0;
    display: flex;
    flex-wrap: wrap;
    /* align-items: center;*/
  }

  .cardItem{
    height: 130px;
    width: 23%;
    margin: 20px;
    background-color: rgba(195,215,223,.3);
    /*background-color: lightyellow;*/
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

  }
  .cardItem:hover{
    transform: scale(1.05);
  }
  .sys{
    width: 20rem;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    padding: 10px;
    margin: 1rem 0 0 2.4rem;
    font-weight: bold;
    font-size: .9rem;
    background-color: rgba(195,215,223,.3);
    box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);
  }
</style>
